<template>
	<div>
		<el-dialog v-model="isShowDialog" title="新增箱子" width="400px" height="270px" :center="false">
			<el-card shadow="hover" body-style="padding:8px; ">
				<el-form :model="ruleForm" size="medium" label-width="80px">
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="行数">
								<el-input-number v-model="ruleForm.Row" clearable :max="20" :min="1" :precision="0"></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="列数">
								<el-input-number v-model="ruleForm.Col" clearable :max="20" :min="1" :precision="0"></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35" v-show="ruleForm.type == 2">
						<el-col class="mb20">
							<el-form-item label="port号">
								<el-radio v-model="ruleForm.Dirt" label="1">横向增长</el-radio>
								<el-radio v-model="ruleForm.Dirt" label="2">纵向增长</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="取名规则">
								<el-checkbox label="行列各两位">行列各两位(建设中)</el-checkbox>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35" v-show="ruleForm.type == 2">
						<el-col class="mb20">
							<el-form-item label="port号起始">
								<el-input v-model="ruleForm.Port" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="ckSubmitData">保存</el-button>
					<el-button @click="isShowDialog = false">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
	components: {},
	props: {
		cabinetCode: String,
	},
	setup(props, { emit }) {
		const state = reactive({
			isShowDialog: false,
			ruleForm: {
				type: props.cabinetCode,
				Col: 8,
				Row: 8,
				Port: 0,
				Dirt: '1',
			},
		});
		const ckSubmitData = () => {
			emit('postMessage', { row: state.ruleForm.Row, col: state.ruleForm.Col, port: state.ruleForm.Port, dirt: state.ruleForm.Dirt });
			state.isShowDialog = false;
		};
		const openDialog = () => {
			state.isShowDialog = true;
		};
		return {
			openDialog,
			ckSubmitData,
			...toRefs(state),
		};
	},
};
</script>
<style scoped></style>
